<template>
	<template-tab v-if="dataList?true:false" :dataList="dataList" :parameter="parameter" @changeTab="changeTab">
	</template-tab>
</template>

<script>
	import templateTab from '@/pagecomponents/templateTab/index.vue'
	export default {
		data() {
			return {
				currentIndex: 0,
				dataList: null, // null表示未初始化或需要重新初始化
				parameter: null,
			};
		},
		components: {
			'template-tab': templateTab
		},
		props: ["templateItem"],
		watch: {
			templateItem: {
				handler(item) {
					if (item.code) {
						this.init(item);
					}
				},
				immediate: true
			}
		},
		methods: {
			changeTab(obj) {
				let {
					index,
					item,
					currentIndex
				} = obj
				this.$emit('changTopic', {
					index: index
				})
			},
			init(item) {
				this.parameter = {
					...item.parameter
				}
				let arrid = []
				if (item.pageData && item.pageData[0]) {
					this.dataList = [].concat(item.pageData)
					arrid = item.pageData.map((obj) => {
						return obj.value || ''
					})
					this.$emit('changTopic', {
						arrid: arrid,
						index: this.currentIndex
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tab_main {
		padding: 0 30rpx 10rpx;
	}

	.tab_box {
		white-space: nowrap;
		z-index: 10;

		.tab_item {
			display: inline-block;
			margin-right: 28rpx;

			&:last-of-type {
				margin-right: 0;
			}

			.title {
				line-height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				position: relative;
				color: inherit;

				&::before {
					content: '';
					width: 0;
					height: 6rpx;
					border-radius: 2rpx;
					background-color: var(--color);
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translate(-50%, 0);
					transition: width 0.3s;
				}

				&.active {
					font-size: 34rpx;
					color: var(--color);
					font-weight: bold;

					&::before {
						width: 85%;
					}
				}
			}
		}
	}
</style>
